<template>
	<view class="home">
		<view class="" v-if="!hTime">
			<image class="bg-img" :src="imageURL"></image>
			<view class="content">
				<view class="rowitem_box">
					<view class="rowitem_box_a">


						<text>{{nowDate}}</text>
						<text style="margin-left: 30rpx;">{{nowWeek}}</text>
					</view>
					<view class="rowitem_box_b">
						<view class="">
							实
						</view>
						<view class="">
							时
						</view>
						<view class="">
							雨
						</view>
						<view class="">
							量
						</view>
					</view>
					<view class="rowitem_box_d">
						（mm）
					</view>
					<view class="rowitem_box_c">
						{{nowTime}}
					</view>
				</view>

				<view class="rowitem_b">
					<view class="item_l">
						<view class="top">
							<image class="topimg" src="../../static/img/min.png" mode=""></image>
							<text class="text_a">分钟雨量：</text>
							<text class="text_b">{{fenzhong}}</text>
						</view>
						<view class="top">
							<image class="topimg" src="../../static/img/1h.png" mode=""></image>
							<text class="text_a">小时雨量：</text>
							<text class="text_b">{{xiaoshiUP}}</text>
						</view>
					</view>
					<view class="item_r">
						<image class="topimg" src="../../static/img/jin.png" mode=""></image>
						<view class="text_r">
							<view class="text_a">
								{{jinri}}
							</view>
							<view class="text_b">
								今日雨量
							</view>
						</view>
					</view>

				</view>
				<view class="rowitem_b">
					<view class="item_l">
						<view class="top">
							<image class="topimg" src="../../static/img/m.png" mode=""></image>
							<text class="text_a">最大雨量：</text>
							<text class="text_b">{{zuida}}</text>
						</view>
						<view class="top">
							<image class="topimg" src="../../static/img/zuo.png" mode=""></image>
							<text class="text_a">昨日雨量：</text>
							<text class="text_b">{{zuori}}</text>
						</view>
					</view>
					<view class="item_r">
						<image class="topimg" src="../../static/img/24.png" mode=""></image>
						<view class="text_r">
							<view class="text_a">
								{{dayUP}}
							</view>
							<view class="text_b">
								24h雨量
							</view>
						</view>
					</view>

				</view>
				<view class="rowitem_c">
					<view class="item_l" @click="latlon">
						<image class="item_l_img" src="../../static/img/jingw.png" mode=""></image>
						<view class="item_l_nub">
							<view class="item_l_nub_top">
								<text class="text">经度：</text>
								<text class="text_bom">{{longitude}}</text>
							</view>
							<view class="item_l_nub_top">
								<text class="text">纬度：</text>
								<text class="text_bom">{{latitude}}</text>
							</view>
						</view>
					</view>
					<view class="item_r">
						<view class="img_l">
							<image class="img_l_img" src="../../static/img/guang.png" mode=""></image>
							<text class="img_l_nub">{{dianya}}</text>
							<text class="img_l_text">V</text>
						</view>
						<view class="img_r">
							<image class="img_l_img" src="../../static/img/dian.png" mode=""></image>
							<text class="img_l_nub">{{guangfu}}</text>
							<text class="img_l_text">V</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="if_hTime" v-if="hTime">
			<!-- <image class="bg-img" :src="imageURL"></image> -->
			<view class="content">
				<view class="rowitem_box">
					<view class="rowitem_box_a">
						<text>{{nowDate}}</text>
						<text style="margin-left: 30rpx;">{{nowWeek}}</text>
					</view>
					<view class="rowitem_box_b">
						<view class="">
							实
						</view>
						<view class="">
							时
						</view>
						<view class="">
							雨
						</view>
						<view class="">
							量
						</view>
					</view>
					<view class="rowitem_box_d">
						（mm）
					</view>
					<view class="rowitem_box_c">
						{{nowTime}}
					</view>
				</view>

				<view class="rowitem_b">
					<view class="item_l">
						<view class="top">
							<image class="topimg" src="../../static/img/min001.png" mode=""></image>
							<text class="text_a">分钟雨量：</text>
							<text class="text_b">{{fenzhong}}</text>
						</view>
						<view class="top">
							<image class="topimg" src="../../static/img/1h001.png" mode=""></image>
							<text class="text_a">小时雨量：</text>
							<text class="text_b">{{xiaoshiUP}}</text>
						</view>
					</view>
					<view class="item_r">
						<image class="topimg" src="../../static/img/jin001.png" mode=""></image>
						<view class="text_r">
							<view class="text_a">
								{{jinri}}
							</view>
							<view class="text_b">
								今日雨量
							</view>
						</view>
					</view>

				</view>
				<view class="rowitem_b">
					<view class="item_l">
						<view class="top">
							<image class="topimg" src="../../static/img/m001.png" mode=""></image>
							<text class="text_a">最大雨量：</text>
							<text class="text_b">{{zuida}}</text>
						</view>
						<view class="top">
							<image class="topimg" src="../../static/img/zuo001.png" mode=""></image>
							<text class="text_a">昨日雨量：</text>
							<text class="text_b">{{zuori}}</text>
						</view>
					</view>
					<view class="item_r">
						<image class="topimg" src="../../static/img/24001.png" mode=""></image>
						<view class="text_r">
							<view class="text_a">
								{{dayUP}}
							</view>
							<view class="text_b">
								24h雨量
							</view>
						</view>
					</view>

				</view>
				<view class="rowitem_c">
					<view class="item_l" @click="latlon">
						<image class="item_l_img" src="../../static/img/jingw001.png" mode=""></image>
						<view class="item_l_nub">
							<view class="item_l_nub_top">
								<text class="text">经度：</text>
								<text class="text_bom">{{longitude}}</text>
							</view>
							<view class="item_l_nub_top">
								<text class="text">纬度：</text>
								<text class="text_bom">{{latitude}}</text>
							</view>
						</view>
					</view>
					<view class="item_r">
						<view class="img_l">
							<image class="img_l_img" src="../../static/img/guang001.png" mode=""></image>
							<text class="img_l_nub">{{dianya}}</text>
							<text class="img_l_text">V</text>
						</view>
						<view class="img_r">
							<image class="img_l_img" src="../../static/img/dian001.png" mode=""></image>
							<text class="img_l_nub">{{guangfu}}</text>
							<text class="img_l_text">V</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const serialPort = uni.requireNativePlugin('Fvv-UniSerialPort')
	export default {
		data() {
			return {
				imageURL: '/static/img/shishiyul1.jpg',
				isOpen: false,
				recText: "",
				fenzhong: '0',
				xiaoshiUP: 0,
				xiaoshi: '0',
				zuida: '0',
				zuori: '0',
				jinri: '0',
				log: '0',
				lat: '0',
				guangfu: '0',
				dianya: '0',
				day: '0',
				dayUP: 0,
				timer: '',
				nowDate: "", // 当前日期
				nowTime: "", // 当前时间
				nowWeek: "", // 当前星期
				latitude: "",
				longitude: "",
				settime: null,
				hTime: null
			}
		},
		onUnload() {
			console.log('页面销毁');
			this.off()
			if (this.timer) { // 注意在vue实例销毁前，清除我们的定时器
				clearInterval(this.timer);
				console.log('timer', this.timer);
			}
			if (this.settime) {
				clearInterval(this.settime);
				console.log('settime', this.settime);
			}

		},
		onShow() {
			// 页面加载完后显示当前时间
			// this.dealWithTime(new Date())
			// 定时刷新时间
			this.timer = setInterval(() => {
				this.dealWithTime(new Date()) // 修改数据date
				// console.log('刷新时间',this.timer);
			}, 1000)
			if (this.latitude == '') {
				this.settime = setInterval(() => {
					if (this.latitude == '') {
						this.latlon()
						console.log('获取中', this.settime);
					} else {
						clearInterval(this.settime);
					}
				}, 1000)

			}

		},
		methods: {
			// 坐标
			latlon() {
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("当前位置的经度：", res.longitude);
						this.latitude = res.latitude + ''
						this.longitude = res.longitude + ''
					},
				})
			},
			//获取当前时间
			dealWithTime(data) { // 获取当前时间
				let formatDateTime;
				let Y = data.getFullYear();
				let M = data.getMonth() + 1;
				let D = data.getDate();
				let H = data.getHours();
				let Min = data.getMinutes();
				let S = data.getSeconds();
				let W = data.getDay();
				H = H < 10 ? "0" + H : H;
				Min = Min < 10 ? "0" + Min : Min;
				S = S < 10 ? "0" + S : S;
				switch (W) {
					case 0:
						W = "日";
						break;
					case 1:
						W = "一";
						break;
					case 2:
						W = "二";
						break;
					case 3:
						W = "三";
						break;
					case 4:
						W = "四";
						break;
					case 5:
						W = "五";
						break;
					case 6:
						W = "六";
						break;
					default:
						break;
				}
				this.nowDate = Y + "年" + M + "月" + D + "日 ";
				this.nowWeek = "周" + W;
				this.nowTime = H + ":" + Min + ":" + S;
				// formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
				if (H >= 17 || H<=6) {
					this.hTime = true
				} else {
					this.hTime = false
				}

			},
			off() {
				serialPort.close()
				console.log('关闭串口');
			},
			state() {
				let isOpen = serialPort.isOpen()
				console.log('isOpen', isOpen);
			},
			//打开串口
			open() {
				serialPort.setPath('/dev/ttyUSB0')
				serialPort.setBaudRate(9600)
				serialPort.setStopBits(1)
				serialPort.setDataBits(8)
				serialPort.open(res => {
					console.log('res', res);
					if (!res.status) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
						return
					}
					uni.showToast({
						title: "数据已接通",
						duration: 2000,
					});
					this.onMessage()

				})
			},
			addMessage(type, msg) {
				this.recText += (type === 'rec' ? "→" : "←") + msg + "\r\n";
			},
			//监听数据 
			onMessage() {
				serialPort.onMessageHex(rec => {
					console.log("16进制", rec.slice(4, 8))
					let iFNum = rec.slice(4, 8)
					let hexNum = rec.slice(4)
					// 分钟
					if (rec.slice(0, 4) + '' == '6d3a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.fenzhong = decimalNumber
						this.xiaoshiUP = this.fenzhong * 60
						this.dayUP = this.fenzhong * 60 * 24
					}
					// 小时
					if (rec.slice(0, 4) + '' == '683a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.xiaoshi = decimalNumber
					}
					// 最大
					if (rec.slice(0, 4) + '' == '4d3a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.zuida = decimalNumber
					}
					// 昨日
					if (rec.slice(0, 4) + '' == '7a3a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.zuori = decimalNumber
					}
					// 今日
					if (rec.slice(0, 4) + '' == '6a3a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.jinri = decimalNumber
					}
					// 24H
					if (rec.slice(0, 4) + '' == '483a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.day = decimalNumber
					}
					// 经度
					if (rec.slice(0, 4) + '' == '6c6f') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.log = decimalNumber
					}
					// 纬度
					if (rec.slice(0, 4) + '' == '6c61') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.lat = decimalNumber
					}
					// 光伏
					if (rec.slice(0, 4) + '' == '673a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.guangfu = decimalNumber
					}
					// 电压
					if (rec.slice(0, 4) + '' == '763a') {
						// let decimalNumber = parseInt(rec.slice(4, 8), 16);
						let decimalNumber = this.hexToString(hexNum)
						console.log('decimalNumber', decimalNumber);
						this.dianya = decimalNumber
					}
				}, send => {
					console.log('send', send)
				})
			},
			// 转换
			hexToString(hex) {
				let str = '';
				for (let i = 0; i < hex.length; i += 2) {
					let charCode = parseInt(hex.substr(i, 2), 16);
					str += String.fromCharCode(charCode);
				}
				return str;
			}
			//发送消息
			// send() {
			// 	if (this.sendType === 'ASCII') {
			// 		serialPort.sendASCII('dfgdhfghf')
			// 	}
			// 	if (this.sendType === 'Hex') {
			// 		serialPort.sendHex('fghfg456746')
			// 	}
			// }
		},
		mounted() {
			this.open()
		}
	}
</script>

<style scoped lang="scss">
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.home {

		// width: 100vw;
		// height: 100vh;
		// padding: 50rpx;
		.content {
			height: 100vh;
			padding: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			// background-color: #9dd865;
			.rowitem_box {
				padding: 0 3vw;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				border-radius: 20rpx;
				width: 95vw;
				box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);

				// background-color: #eceba5;
				.rowitem_box_a {
					width: 23vw;
					font-size: 50rpx;
					margin-bottom: 20rpx;
					// background-color: #d87d59;
				}

				.rowitem_box_b {
					width: 36vw;
					height: 14vh;
					font-size: 140rpx;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					// background-color: #6fd87b;
				}

				.rowitem_box_d {
					font-size: 50rpx;
					margin-left: -4vw;
					margin-bottom: 20rpx;
				}

				.rowitem_box_c {
					width: 16vw;
					font-size: 50rpx;
					text-align: end;
					margin-bottom: 20rpx;
					// background-color: #92d886;
				}
			}


			.rowitem_b {
				width: 95vw;
				height: 25vh;
				border-radius: 20rpx;
				// background-color: #b3c1d8;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item_l {
					height: 25vh;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.top {
						width: 47vw;
						height: 12vh;
						padding: 30rpx;
						border-radius: 20rpx;
						// background-color: #b971d8;
						box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
						display: flex;
						align-items: center;
						font-size: 100rpx;
						color: #247677;
						font-family: 'MyFont';

						.topimg {
							width: 100rpx;
							height: 100rpx;
							margin-right: 20rpx;
						}

						.text_b {
							font-size: 120rpx;
							color: #000000;
						}
					}
				}

				.item_r {
					width: 47vw;
					height: 25vh;
					border-radius: 20rpx;
					padding: 50rpx;
					// background-color: #d80808;
					box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					justify-content: space-around;

					.topimg {
						width: 280rpx;
						height: 280rpx;
					}

					.text_r {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.text_a {
							font-size: 200rpx;
							margin-bottom: -30rpx;
							font-family: 'MyFont';
						}

						.text_b {
							font-size: 90rpx;
							margin-top: -20rpx;
							color: #1b9f35;
						}
					}
				}
			}

			.rowitem_c {
				width: 95vw;
				height: 25vh;
				border-radius: 20rpx;
				// background-color: #b3c1d8;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item_l {
					width: 47vw;
					height: 25vh;
					border-radius: 20rpx;
					padding: 30rpx;
					display: flex;
					align-items: center;
					font-family: 'MyFont';
					// background-color: #d8cd29;
					box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);

					.item_l_img {
						width: 150rpx;
						height: 150rpx;
						margin-right: 30rpx;
					}

					.item_l_nub {
						.item_l_nub_top {
							font-size: 80rpx;

							.text {
								color: #247677;
							}

							.text_bom {
								color: #000000;
							}
						}

						.item_l_nub_bom {}
					}
				}

				.item_r {
					width: 47vw;
					height: 25vh;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					// background-color: #5bb1d8;
					.img_l {
						width: 23vw;
						height: 25vh;
						padding: 30rpx;
						border-radius: 20rpx;
						// background-color: #1b9f35;
						box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
						display: flex;
						align-items: center;
						justify-content: space-around;

						.img_l_img {
							width: 150rpx;
							height: 150rpx;
						}

						.img_l_nub {
							font-size: 100rpx;
							font-family: 'MyFont';
						}

						.img_l_text {
							font-size: 80rpx;
							color: #247677;
						}
					}

					.img_r {
						width: 23vw;
						height: 25vh;
						border-radius: 20rpx;
						// background-color: #247677;
						box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
						display: flex;
						align-items: center;
						justify-content: space-around;

						.img_l_img {
							width: 130rpx;
							height: 80rpx;
						}

						.img_l_nub {
							font-size: 100rpx;
							font-family: 'MyFont';
						}

						.img_l_text {
							font-size: 80rpx;
							color: #247677;
						}

					}
				}
			}
		}

		.if_hTime {
			.content {
				height: 100vh;
				padding: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				background-color: #55575a;

				.rowitem_box {
					padding: 0 3vw;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					border-radius: 20rpx;
					width: 95vw;
					box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
					background-color: #303338;
					color: #ffaa00;

					.rowitem_box_a {
						width: 23vw;
						font-size: 50rpx;
						margin-bottom: 20rpx;
						// background-color: #d87d59;
					}

					.rowitem_box_b {
						width: 36vw;
						height: 14vh;
						font-size: 140rpx;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						// background-color: #6fd87b;
					}

					.rowitem_box_d {
						font-size: 50rpx;
						margin-left: -4vw;
						margin-bottom: 20rpx;
					}

					.rowitem_box_c {
						width: 16vw;
						font-size: 50rpx;
						text-align: end;
						margin-bottom: 20rpx;
						// background-color: #92d886;
					}
				}


				.rowitem_b {
					width: 95vw;
					height: 25vh;
					border-radius: 20rpx;
					// background-color: #b3c1d8;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item_l {
						height: 25vh;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.top {
							width: 47vw;
							height: 12vh;
							padding: 30rpx;
							border-radius: 20rpx;
							// background-color: #b971d8;
							box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
							display: flex;
							align-items: center;
							font-size: 100rpx;
							color: #f26b38;
							font-family: 'MyFont';
							background-color: #303338;
							border: 10rpx solid #434548;

							.topimg {
								width: 100rpx;
								height: 100rpx;
								margin-right: 20rpx;
							}

							.text_b {
								margin-bottom: -20rpx;
								font-size: 120rpx;
								color: #eceba5;
							}
						}
					}

					.item_r {
						width: 47vw;
						height: 25vh;
						border-radius: 20rpx;
						padding: 50rpx;
						// background-color: #d80808;
						box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
						display: flex;
						align-items: center;
						justify-content: space-around;
						background-color: #303338;

						.topimg {
							width: 280rpx;
							height: 280rpx;
						}

						.text_r {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.text_a {
								font-size: 200rpx;
								margin-bottom: -30rpx;
								font-family: 'MyFont';
								color: #eceba5;
							}

							.text_b {
								font-size: 90rpx;
								margin-top: -20rpx;
								color: #fe4b45;
							}
						}
					}
				}

				.rowitem_c {
					width: 95vw;
					height: 25vh;
					border-radius: 20rpx;
					// background-color: #b3c1d8;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #eceba5;

					.item_l {
						width: 47vw;
						height: 25vh;
						border-radius: 20rpx;
						padding: 30rpx;
						display: flex;
						align-items: center;
						font-family: 'MyFont';
						// background-color: #d8cd29;
						box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
						background-color: #303338;

						.item_l_img {
							width: 150rpx;
							height: 150rpx;
							margin-right: 30rpx;
						}

						.item_l_nub {
							.item_l_nub_top {
								font-size: 80rpx;

								.text {
									color: #f26b38;
								}

								.text_bom {
									color: #eceba5;
								}
							}

							.item_l_nub_bom {}
						}
					}

					.item_r {
						width: 47vw;
						height: 25vh;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						// background-color: #5bb1d8;
						.img_l {
							width: 23vw;
							height: 25vh;
							padding: 30rpx;
							border-radius: 20rpx;
							// background-color: #1b9f35;
							box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
							background-color: #303338;
							display: flex;
							align-items: center;
							justify-content: space-around;

							.img_l_img {
								width: 150rpx;
								height: 150rpx;
							}

							.img_l_nub {
								font-size: 100rpx;
								font-family: 'MyFont';
							}

							.img_l_text {
								font-size: 80rpx;
								color: #f26b38;
							}
						}

						.img_r {
							width: 23vw;
							height: 25vh;
							border-radius: 20rpx;
							// background-color: #247677;
							box-shadow: 0rpx 0rpx 10rpx 5rpx rgba(0, 0, 0, 0.1);
							background-color: #303338;
							display: flex;
							align-items: center;
							justify-content: space-around;

							.img_l_img {
								width: 130rpx;
								height: 80rpx;
							}

							.img_l_nub {
								font-size: 100rpx;
								font-family: 'MyFont';
							}

							.img_l_text {
								font-size: 80rpx;
								color: #f26b38;
							}

						}
					}
				}
			}
		}
	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	page {
		/* background-color: #f4f6f8; */
	}
</style>